<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="/warn/views/css/lib/chartist/chartist.min.css" rel="stylesheet">
<link href="/warn/views/css/lib/owl.carousel.min.css" rel="stylesheet" />
<link href="/warn/views/css/lib/owl.theme.default.min.css" rel="stylesheet" />
<link href="/warn/views/css/helper.css" rel="stylesheet">
<link href="/warn/views/css/style.css" rel="stylesheet">
<title>Insert title here</title>

</head>

<body>
	<!-- Bread crumb -->
	<div class="row page-titles">
		<div class="col-md-5 align-self-center">
			<h3 class="text-primary">集群预警</h3>
		</div>
		<div class="col-md-7 align-self-center">
			<ol class="breadcrumb">
				<li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
				<li class="breadcrumb-item active">xx</li>
			</ol>
		</div>
	</div>
	<!-- End Bread crumb -->


	<!-- Container fluid  -->
	<div class="container-fluid">
		<!-- Start Page Content -->
		<div class="row">
			<div class="col-md-3">
				<div class="card bg-primary p-20">
					<div class="media widget-ten">
						<div class="media-left meida media-middle">
							<span><i class="ti-bag f-s-40"></i></span>
						</div>
						<div class="media-body media-text-right">
							<h2 class="color-white" id="diskRate">0</h2>
							<p class="m-b-0">磁盘使用率</p>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-3">
				<div class="card bg-pink p-20">
					<div class="media widget-ten">
						<div class="media-left meida media-middle">
							<span><i class="ti-comment f-s-40"></i></span>
						</div>
						<div class="media-body media-text-right">
							<h2 class="color-white" id="memoryRate">0</h2>
							<p class="m-b-0">内存使用率</p>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-3">
				<div class="card bg-success p-20">
					<div class="media widget-ten">
						<div class="media-left meida media-middle">
							<span><i class="ti-vector f-s-40"></i></span>
						</div>
						<div class="media-body media-text-right">
							<h2 class="color-white" id="cpuRate">0</h2>
							<p class="m-b-0">CPU使用率</p>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-3">
				<div class="card bg-danger p-20">
					<div class="media widget-ten">
						<div class="media-left meida media-middle">
							<span><i class="ti-location-pin f-s-40"></i></span>
						</div>
						<div class="media-body media-text-right">
							<h2 class="color-white" id="totalWarn">0</h2>
							<p class="m-b-0">报警总数</p>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- <div class="row">-->
		<!--	<div class="col-lg-6">-->
				<div class="card">
					<div class="card-title">
						<h4>资源监控</h4>
					</div>
					<div class="sales-chart">
						<div id="rate-chart" style="height: 350px"></div>
					</div>
				</div>
				<!-- /# card -->
		<!-- 	</div> -->
			<!-- /# column -->
		<!-- 	<div class="col-lg-6"> -->
				<div class="card">
					<div class="card-title">
						<h4>异常详情</h4>
					</div>
					<div class="card-body">
						<div class="table-responsive" style=" min-height:350px;overflow-y:auto;max-height:350px;" >
							<table class="table table-hover ">
								<thead>
									<tr>
										<td>磁盘</td>
										<td>内存</td>
										<td>时间</td>
										<td>异常信息</td>
										<td style="text-align:left;">时间</td>
									</tr>
								</thead>
								<tbody id = "error-accounts" >
								</tbody>
							</table>
						</div>
					</div>
				</div>
		<!-- 	</div> -->
		<!--  </div>-->

		<!-- /# row -->

		<!-- End PAge Content -->
	</div>
	<!-- End Container fluid  -->
	<script type="text/javascript" src="/warn/views/js/jquery.js"></script>
	<script src="/warn/views/js/highcharts.js"></script>


<script type="text/javascript">

var chart = null; // 定义全局变量
$(document).ready(function() {
  chart = new Highcharts.Chart({
    chart: {
      renderTo: 'rate-chart',
     // type: 'spline',
      type: 'area',
      zoomType: 'x',
      panning: true,
      panKey: 'shift',
      events: {
        load: requestData // 图表加载完毕后执行的回调函数
      }
    },
    credits: {
		enabled:false,
    	text: 'dbiir',
    	href: 'http://iir.ruc.edu.cn'
	},
    title: {
      text: ''
    },
    xAxis: {
      type: 'datetime',
      tickPixelInterval: 150,
      maxZoom: 20 * 1000
    },
    yAxis: {
      minPadding: 0.2,
      maxPadding: 0.2,
      title: {
        text: '',
        margin: 80
      }
    },
    series: [{
      name: 'MemoryUsed',
      data: []
    },
    {
        name: 'DiskUsed',
        data: []
      },
      {
          name: 'CPUUsed',
          data: []
        }
    ]
  });
});
 

/**
 * Ajax 请求数据接口，并通过 Highcharts 提供的函数进行动态更新
 * 接口调用完毕后间隔 1 s 继续调用本函数，以达到实时请求数据，实时更新的效果
 */
function requestData() {
	$.ajax({
		url: '/warn/highEchart/getWarnWater',
		cache: false,
		success: function(data) {
		  	console.log(data.value)
			//  var points = JSON.parse(point.value)
			var warnMsg = data.value.split(",")
			var diskRate = parseInt(warnMsg[0])
		  	var memRate = parseInt(warnMsg[1])
		  	var cpuRate = parseInt(warnMsg[2])
		  	var warnCode = parseInt(warnMsg[3])
		  	var time = warnMsg[4]
		  	var msg = warnMsg[5]
		  	
		  	var x = (new Date()).getTime(); // 当前时间
			//y = parseInt(point.value);	
		    var series = chart.series[0];
		    var series1 = chart.series[1];
		    var series2 = chart.series[2];
		    shift = series.data.length > 20; // 当数据点数量超过 20 个，则指定删除第一个点
		    shift1 = series1.data.length > 20;
		    shift2 = series2.data.length > 20;
		    // 新增点操作
		    //具体的参数详见：https://api.hcharts.cn/highcharts#Series.addPoint
		    chart.series[0].addPoint([x,diskRate], true, shift);
		    chart.series[1].addPoint([x,memRate], true, shift1);
		    chart.series[2].addPoint([x,cpuRate], true, shift2);
		    document.getElementById("diskRate").innerHTML = diskRate
		    document.getElementById("memoryRate").innerHTML = memRate
		    document.getElementById("cpuRate").innerHTML = cpuRate
		    if(warnCode!=0){
		    		if(parseInt(document.getElementById("totalWarn").innerHTML)%7==0){
					document.getElementById("error-accounts").innerHTML = "<tr> <td>"+diskRate+"</td> <td>"+memRate+"</td> <td>"+cpuRate+"</td><td style='text-align:left;'>"+time+"</td> <td>"+msg+"</td> </tr>"
				}else{
					document.getElementById("error-accounts").innerHTML += "<tr> <td>"+diskRate+"</td> <td>"+memRate+"</td> <td>"+cpuRate+"</td><td style='text-align:left;'>"+time+"</td> <td>"+msg+"</td> </tr>"
				}
		    		document.getElementById("totalWarn").innerHTML = parseInt(document.getElementById("totalWarn").innerHTML)+1
		    }
		    
		    // 一秒后继续调用本函数
		    setTimeout(requestData, 600);
		  },
	  
	});
 
}

</script>


</body>
</html>